<template>
  <div class="container">
    <el-row style="margin-bottom: 12px;background-color: #fff">
      <parking-flow-form @dwboolean="openDwDialog"
                         @parkboolean="openParkDialog"
                         @roadboolean="openRoadDialog"
                         @personboolean="openPersonDialog"
                         @backboolean="openBackDialog"
                         @parkingData="sendParkingData"
                         @loading="sendLoading"
                         :dw_name.sync="dw_name"
                         :road_name.sync="road_name"
                         :park_name.sync="park_name"
                         :person_name.sync="personName"
                         :back_name.sync="backName"
                         :pageNum="pageNum"
                         :pageSize="pageSize"></parking-flow-form>
    </el-row>
    <el-row style="background-color: #fff">
      <parking-flow-table :loading="loading"
                          @sizePage="changeSizePage"
                          @page_num="changePageNum"
                          @detailboolean="openDetailBialog" :dataTable="dataTable"></parking-flow-table>
    </el-row>
    <!-- 选择单位弹出框 -->
    <person-child-dialog-dw :dialogDwVisible.sync="dialogDwVisible"
                            :dwType="dwType"
                            :dwLoading.sync="dwLoading"
                            @dwName4="selectDwName4"></person-child-dialog-dw>
    <!-- 选择车场弹出框 -->
    <parking-dialog :parkingVisible.sync="dialogParkvisible"
                    :parkLoading.sync="parkLoading"
                    @parkName="selectParkName"></parking-dialog>
    <!-- 选择收费路段弹出框 -->
    <person-child-dialog-road :dialogRoadVisible.sync="dialogRoadVisible"
                              :roadLoading.sync="roadLoading"
                              @roadName="selectRoadName"></person-child-dialog-road>
    <!--选择收费员弹出框-->
    <person-select-dialog :dialogSelectPerVisible.sync="dialogPersonVisible"
                          @selectPer="selectPersonName"></person-select-dialog>
    <!--补缴收费员弹出框 -->
    <back-person-dialog :backVisible.sync="dialogBackVisible"
                        :backLoading.sync="backLoading"
                        @backName="selectBackName"></back-person-dialog>
    <!--取证明细弹出框 -->
    <parking-detail-dialog :dialogDetailVisible.sync="dialogDetailVisible" :detailPark="detailPark"></parking-detail-dialog>
  </div>
</template>

<script>
  import ParkingFlowForm from './parkingflowChild/parkingFlowForm'
  import PersonChildDialogDw from '../organizationManagement/personChild/personChildDialogDw'
  import ParkingDialog from './parkingflowChild/parkingDialog'
  import PersonChildDialogRoad from '../organizationManagement/personChild/personChildDialogRoad'
  import PersonSelectDialog from '../organizationManagement/organizationChild/personSelectDialog'
  import BackPersonDialog from './parkingflowChild/backPersonDialog'
  import ParkingFlowTable from './parkingflowChild/parkingFlowTable'
  import ParkingDetailDialog from './parkingflowChild/parkingDetailDialog'

  export default {
    data() {
      return {
        dialogDwVisible: false, // 单位弹出框
        dialogParkvisible: false, // 选择单位弹出框
        dialogRoadVisible: false, // 选择收费路段弹出框
        dialogPersonVisible: false, // 选择收费员弹出框
        dialogBackVisible: false, // 补缴收费员弹出框
        dialogDetailVisible: false, // 取证明细弹出框
        loading: false, // 表格加载效果
        dwLoading: false,
        parkLoading: false,
        roadLoading: false,
        backLoading: false,
        detailPark: '', // 取证明细
        dwType: 0,
        dw_name: '', // 单位名称,
        road_name: '', // 收费路段名称
        park_name: '', // 停车场名称
        personName: '', // 收费员名称
        backName: '', // 补缴收费员
        dataTable: '', // 表单数据
        pageNum: 1, // 当前页码
        pageSize: 10 // 每页条数
      }
    },
    components: {
      ParkingDetailDialog,
      ParkingFlowTable,
      BackPersonDialog,
      PersonSelectDialog,
      PersonChildDialogRoad,
      ParkingDialog,
      PersonChildDialogDw,
      ParkingFlowForm
    },
    methods: {
      openDwDialog: function(val) {
        this.dwType = 3
        this.dialogDwVisible = val
        this.dwLoading = val
      },
      openParkDialog: function(val) {
        this.dialogParkvisible = val
        this.parkLoading = val
      },
      openRoadDialog: function(val) {
        this.dialogRoadVisible = val
        this.roadLoading = val
      },
      openPersonDialog: function(val) {
        this.dialogPersonVisible = val
      },
      openBackDialog: function(val) {
        this.dialogBackVisible = val
        this.backLoading = val
      },
      openDetailBialog: function(val) {
        this.detailPark = val[0]
        this.dialogDetailVisible = val[1]
      },
      selectDwName4: function(val) {
        this.dw_name = val
      },
      selectRoadName: function(val) {
        this.road_name = val
      },
      selectParkName: function(val) {
        this.park_name = val
      },
      selectPersonName: function(val) {
        this.personName = val
      },
      selectBackName: function(val) {
        this.backName = val
      },
      sendParkingData: function(val) {
        this.dataTable = val
      },
      sendLoading: function(val) {
        this.loading = val
      },
      changePageNum: function(val) {
        this.pageNum = val
      },
      changeSizePage: function(val) {
        this.pageSize = val
      }
    }
  }
</script>

<style scoped>
  .container {
    padding-top: 16px;
    margin-left: 42px;
    margin-right: 42px;
  }
</style>
